<template>
  <div class="products">
    <h1>产品列表标题</h1>
    <hr />
    <div class="top">
      <span class="span">产品名称:</span>
      <input
        class="inp"
        type="text"
        placeholder="请输入搜索关键字"
        @input="inp"
        v-model.trim="inpTxt"
      />
      <input class="btn" type="button" value="新增" @click="addArr" />
      <input class="btn" type="button" value="批量删除" @click="removes" />
    </div>
    <table>
      <tr>
        <th>
          <input type="checkbox" v-model="inputAll" name="" id="" />
        </th>
        <th>产品名称</th>
        <th>产品编号</th>
        <th>修改时间</th>
        <th>成本价</th>
        <th>库存数</th>
        <th>总价</th>
        <th>登记人</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="item.id" v-show="item.isShow">
        <th class="flex">
          <input type="checkbox" v-model="item.isChecked" name="" id="" />
        </th>
        <td>{{ item.pname }}</td>
        <td>{{ item.id }}</td>
        <!-- <td>{{ item.uptDate.slice(0, 4) | changeTime(item) }}</td> -->
        <td>{{ item.uptDate | changeTime }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>总价</td>
        <td>{{ item.user }}</td>
        <td>
          <span @click="move(index)">编辑</span> |
          <span @click="remove(index)">删除</span>
        </td>
      </tr>
      <tr>
        <td colspan="9">合计:{{ num }}类产品,总价:{{ total }}元</td>
      </tr>
    </table>
  </div>
</template>

<script>
// let time1 = new Date().toLocaleString();
// let newTime = "";
// for (var i = 0; i <script time1.length; i++) {
//   if (time1[i] === "/") {
//     newTime += "-";
//   } else {
//     newTime += time1[i];
//   }
//   newTime = newTime.slice(0, 15);
// }
// console.log(newTime);

import { mapState, mapGetters, mapMutations } from "vuex";

export default {
  data() {
    return {
      // 文本框输入
      inpTxt: "",
      flag: false,
      newTime: "",
    };
  },
  computed: {
    ...mapState(["arr", "uptDate2"]),
    ...mapGetters(["total", "num", "newArr"]),
    // 全选框的值
    inputAll: {
      get() {
        this.flag = true;
        this.arr.forEach((item) => {
          if (item.isChecked === false) {
            this.flag = false;
          }
        });
        if (this.arr.length === 0) this.flag = false;
        return this.flag;
      },
      set(val) {
        // this.flag = val;
        // this.addIsChecked(val);
        this.arr.map((item) => {
          item.isChecked = val;
        });
      },
    },
  },
  methods: {
    ...mapMutations([
      "pushArr",
      "changeIsShow",
      "removeArr",
      "addIsChecked",
      "removeArrS",
      "isShowList",
    ]),
    addArr() {
      this.$router.push("/add");
    },
    inp() {
      this.arr.forEach((item, index) => {
        if (item.pname.includes(this.inpTxt.trim())) {
          // 产品有输入的关键字 显示
          item.isShow = true;
        } else {
          item.isShow = false;
        }
      });
    },
    remove(i) {
      this.removeArr(i);
    },
    removes() {
      let arr2 = [];
      this.arr.forEach((item, index) => {
        // 首先获取选中的单选框 获取对应的索引，存到数组里
        if (item.isChecked) {
          arr2.push(index);
        }
      });
      this.removeArrS(arr2);
    },
    move(i) {
      this.$router.push({
        path: "/edit",
        query: {
          id: this.arr[i].id,
        },
      });
    },
  },
  created() {
    this.arr.forEach((item) => {
      this.$set(item, "isChecked", false);
    });
  },
  filters: {
    // changeTime(val, item) {
    //   // console.log(this.newTime);
    //   return (
    //     val +
    //     "-" +
    //     item.uptDate.slice(5, 7) +
    //     "-" +
    //     item.uptDate.slice(8, 10) +
    //     item.uptDate.slice(10, 15)
    //   );
    // },
    changeTime(val) {
      // console.log(this.newTime);
      return val.toLocaleString().replaceAll("/", "-").slice(0, 15);
    },
  },
};
</script>

<style lang='less' scope>
.products {
  padding-left: 10px;
  h1 {
    color: #000;
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
  }
  .top {
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    .span {
      font-size: 20px;
    }
    input {
      height: 30px;
      outline-style: none;
      margin-left: 20px;
    }
    .inp {
      text-indent: 1em;
      border: 1px solid rgb(94, 188, 214);
    }
    .btn {
      background: rgb(94, 188, 214);
      color: #fff;
      border: none;
      padding: 0 10px;
    }
  }
}
table {
  border-collapse: collapse;
  tr,
  td,
  th {
    border: 1px solid #ccc;
    padding: 0 15px;
    text-align: center;
    height: 30px;
  }
  th input {
    vertical-align: middle;
  }
}
</style>